<template>
  <div class="check-wrap">

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad" class="check-list"
    >
      <div class="check-box" v-for="(item,index) in checkList" :key="index">
        <div class="check-content">
          <span class="name">{{item.userName}}</span><span class="number">{{item.phone}}</span>
          <button type="button" class="pass" @click="pass(item.id)">通过</button>
        </div>
        <div class="check-content">
          <span class="name">身份证号:</span><span class="number">{{item.userCardNumber}}</span>
          <button type="button" class="refuse" @click="refuse(item.id)">拒绝</button>
        </div>
      </div>
    </van-list>

    <!--搜索无结果-->
    <div class="empty-wrap" v-if="checkList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <backpage @backPage="backPage"></backpage>
  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import backpage from "../../components/backpage"

  export default {
    inject: ['reload'],
    data() {
      return {
        userSign: "",
        mechanismId: "",
        checkList: [],
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.mechanismId = this.$route.query.mechanismId;
    },
    methods: {
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryCheckList();
            this.timer = null;
          }, 500)
        }
      },
      queryCheckList() {//查询申请列表
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/get_work_user_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_money/get_work_user_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.checkList = this.checkList.concat(resultObj.data);
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.checkList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      refuse(id) {//拒绝
        this.$router.push({path: "/refuse", query: {"id": id, "mechanismId": this.mechanismId}});
      },
      pass(id) {//通过
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "mechanismId": this.mechanismId,
          "type": 1,
          "id": id
        };
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/set_work_user?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.post(baseUrl + "/work_money/set_work_user?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.reload();
              this.$vux.toast.text("通过失败,请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      }
    },
    components: {
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  .check-wrap
    width: 100%
    height: 100%
    .check-list
      position: absolute
      top: 0
      width: 100%
      height: auto
      .check-box
        display: flex
        justify-content: center
        flex-direction: column
        width: 100%
        height: 2.36rem
        border-bottom: 1px solid rgba(230, 230, 230, 1)
        .check-content
          display: flex
          align-items: center
          margin-left: 0.426666rem
          margin-bottom: 0.2rem
          .name
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .number
            padding-left: 0.4rem
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .pass
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.6rem
            height: 0.693333rem
            line-height: 0.693333rem
            background: rgba(60, 175, 255, 1)
            border-radius: 0.346666rem
            font-size: 0.346666rem
            color: rgba(255, 255, 255, 1)
            border: 1px solid rgba(60, 175, 255, 1)
          .refuse
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.6rem
            height: 0.693333rem
            line-height: 0.693333rem
            border: 1px solid rgba(60, 175, 255, 1)
            border-radius: 0.346666rem
            font-size: 0.386666rem
            color: rgba(60, 175, 255, 1)
            background: rgba(255, 255, 255, 1)
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
